<template>
	<view class="">

		<view class="font">
			<!-- <view class="Basics Basicsred ">
				<view class="louis-center">
					Flex布局
				</view>
			</view> -->
			<!-- louis-center -->
			<view style="padding: 10rpx 0rpx;" class="Basics Basicsrblue louis-center">
				<view class="louis-center ">
					<text>class="louis-border-厚度"</text>
				</view>

			</view>
			<view style="padding: 10rpx 0rpx;" class="louis-font-center Basics Basicsred">
				<view class="">
					注:厚度最大值为20,可加单位px,rpx.
				</view>
			</view>



			<view class="Basics ">
				<view class="louis-space-between">
					<view v-for="(Basicsclass,i) in maglist" :key="i" class="">
						<view class="louis-center">
							<view style="line-height: 0rpx;" v-for="(item,index) in mincolorlist" :key="index" :class="['louis-bg-'+item.color,Basicsclass.class]"
							 class="louis-bg-transparent louis-border-color-F colorblock louis-border-5rpx">

							</view>
						</view>
						<view class="louis-p-t-10 louis-center">
							{{Basicsclass.name}}
						</view>
					</view>

				</view>
			</view>

			<view style="padding: 10rpx 0rpx;" class="louis-font-center Basics Basicsrblue">
				class="louis-border-风格"

			</view>
			<view class="Basics ">
				<view class="louis-space-between">
					<view v-for="(Basicsclass,i) in stylelist" :key="i" class="">
						<view class="louis-center">
							<view style="line-height: 0rpx;" v-for="(item,index) in mincolorlist" :key="index" :class="['louis-bg-'+item.color,Basicsclass.class]"
							 class="louis-bg-transparent louis-border-color-F colorblock louis-border-5rpx">

							</view>
						</view>
						<view class="louis-p-t-10 louis-center">
							{{Basicsclass.name}}
						</view>
					</view>

				</view>
			</view>

			<view style="padding: 10rpx 0rpx;" class="louis-font-center Basics Basicsrblue">
				class="louis-border-颜色"

			</view>
			<view class="Basics ">
				<view class="louis-space-between">
					<view v-for="(Basicsclass,i) in Abbreviationlist" :key="i" class="">
						<view class="louis-center">
							<view style="line-height: 0rpx;" v-for="(item,index) in mincolorlist" :key="index" :class="['louis-bg-'+item.color,Basicsclass.class]"
							 class="louis-bg-transparent colorblock louis-border-5rpx">

							</view>
						</view>
						<view class="louis-p-t-10 louis-center">
							{{Basicsclass.name}}
						</view>
					</view>

				</view>
			</view>


			<view style="padding: 10rpx 0rpx;" class="louis-font-center Basics Basicsrblue">

				<view class="">
					class="louis-border-半径"
				</view>

			</view>
			<view style="padding: 10rpx 0rpx;" class="louis-font-center Basics Basicsred">


				<view class="">
					注:P代表百分比，圆形直接用类 louis-circular
				</view>

			</view>

			<view class="Basics ">
				<view class="louis-space-between">
					<view :key="i" v-for="(Basicsclass,i) in louisradiuslist" class="">
						<view class="louis-center">
							<view style="line-height: 0rpx;" v-for="(item,index) in mincolorlist" :key="index" :class="['louis-bg-'+item.color,Basicsclass.class]"
							 class="louis-bg-transparent louis-border-color-F colorblock louis-border-5rpx">

							</view>
						</view>
						<view class="louis-p-t-10 louis-center">
							{{Basicsclass.name}}
						</view>
					</view>

				</view>
			</view>


			<view style="padding: 10rpx 0rpx;" class="Basics Basicsrblue">
				<view class="louis-center ">
					<text>class="louis-border-box"</text>
				</view>

			</view>
			<view class="Basics ">
				<view class="louis-space-between">
					<view class="">
						<view style="line-height: 0rpx;" v-for="(item,index) in newmincolorlist" :key="index" :class="['louis-bg-'+item.color]"
						 class="newcolorblock louis-border-box louis-p-30rpx">
							louis-border-box
						</view>
					</view>

				</view>
			</view>

			<view class="Basics ">
				<view class="louis-space-between">
					<view class="">
						<view style="line-height: 0rpx;" v-for="(item,index) in newmincolorlist" :key="index" :class="['louis-bg-'+item.color]"
						 class="newcolorblock louis-content-box louis-p-30rpx">
							louis-content-box
						</view>
					</view>

				</view>
			</view>


		</view>





		 <louis-view p="20rpx">
			
		</louis-view>

	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				louisradiuslist: [{
						class: "louis-radius-10p",
						name: "10p"
					}, {
						class: "louis-radius-20p",
						name: "20px"
					}, {
						class: "louis-radius-30p",
						name: "30"
					}, {
						class: "louis-radius-40p",
						name: "40p"
					},
					{
						class: "louis-circular",
						name: "circular"
					},
				],
				maglist: [{
						class: "louis-border-5px",
						name: "louis-border-5px"
					},
					{
						class: "louis-border-5rpx",
						name: "louis-border-5rpx"
					},
					{
						class: "louis-border-5",
						name: "louis-border-5"
					},
				],
				Abbreviationlist: [{
						class: "louis-border-color-P",
						name: "P"
					},
					{
						class: "louis-border-color-W",
						name: "W"
					},
					{
						class: "louis-border-color-D",
						name: "D"
					},
					{
						class: "louis-border-color-I",
						name: "I"
					},
					{
						class: "louis-border-color-S",
						name: "S"
					},
					{
						class: "louis-border-color-F",
						name: "F"
					},
					{
						class: "louis-border-color-B",
						name: "B"
					},
				],
				stylelist: [{
						class: "louis-border-dotted",
						name: "dotted"
					},
					{
						class: "louis-border-dashed",
						name: "dashed"
					},
					{
						class: "louis-border-solid",
						name: "solid"
					},
					{
						class: "louis-border-double",
						name: "double"
					},
					{
						class: "louis-border-groove",
						name: "groove"
					},
					{
						class: "louis-border-ridge",
						name: "ridge"
					},
					{
						class: "louis-border-inset",
						name: "inset"
					},
					{
						class: "louis-border-outset",
						name: "outset"
					},
				],
				mincolorlist: [

					{
						color: "P",
						name: "普通",
						hex: "#409EFF"
					},
					// {
					// 	color: "S",
					// 	name: "成功",
					// 	hex: "#67C23A"
					// },
					// {
					// 	color: "D",
					// 	name: "危险",
					// 	hex: "#F56C6C"
					// }

				],
				newmincolorlist: [

					{
						color: "P",
						name: "普通",
						hex: "#409EFF"
					},
					// {
					// 	color: "S",
					// 	name: "成功",
					// 	hex: "#67C23A"
					// },
					{
						color: "D",
						name: "危险",
						hex: "#F56C6C"
					}

				],
			};
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.Fonttextbox {
		// height: 4000rpx;
		overflow: hidden;

	}

	.Fonttext {
		// -webkit-text-stroke: 1px #6893a0;
		position: absolute;
		z-index: 200;
		color: rgba(255, 255, 255, 0.7);
		width: 100%;
		height: 100%;
		top: 42rpx;
		right: 0rpx;
		width: 200rpx;
		font-size: 45rpx;
		// transform:skewX(23deg);
		// color: #db79a5;
		font-weight: bold;
		opacity: 0.8;
	}

	.Basics {
		color: #FFF;
		font-size: 25rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		border: 2px solid #C0C0C0;

		background-color: rgba(29, 5, 41, 0.2);
		padding-top: 15rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		// &:active {
		// 	background-color: rgba(206, 31, 84, 0.8);
		// }
	}

	.Basicsred {
		background-color: rgba(206, 31, 84, 0.5);
	}

	.Basicsrblue {
		background-color: rgba(64, 158, 255, 0.5);
	}

	.font {
		margin-top: 20rpx;
	}

	.coloritem {
		position: relative;
		top: -50rpx;
	}

	.colorblock {
		//             min-width: 30rpx;
		// min-height: 30rpx;
		// font-size: 25rpx;
		display: inline-block;
		margin-left: 7rpx;
		// margin-top: 10rpx;
		// width: 130rpx;
		// height: 130rpx;

		// border-radius: 10rpx;
		// padding: 20rpx;
		width: 50rpx;
		height: 50rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.colorblock:nth-child(5n) {
		margin-right: 0rpx;
	}

	#F {
		color: #000000
	}

	.louis-bg-MD {
		// background-color: rgba(0,0,0,0.1);
		display: inline-block;
		padding: 5rpx 10rpx;

	}

	.newcolorblock {
		//             min-width: 30rpx;
		// min-height: 30rpx;
		// font-size: 25rpx;
		display: inline-block;
		margin-left: 7rpx;
		// margin-top: 10rpx;
		// width: 130rpx;
		// height: 130rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
</style>
